import { Fragment, useEffect, useMemo, useRef, useState } from "react"
import "./film.css"

import { getMovies } from "../../api/mm"

function Film() {
  const listRef = useRef()
  const [films, setfilms] = useState([])

  useEffect(() => {
    console.log("挂载")
    // console.log(listRef.current);

    const fetchData = async () => {
      const filmsData = (await getMovies({
        cityId: 440300,
        pageNum: 1,
        pageSize: 10,
        type: 1,
      })).data

      setfilms((prevState) => {
        return [
          ...prevState,
          ...filmsData.films
        ]
      })
    }

    fetchData()

    /*  */
    return () => {
      console.log("卸载");
    }
  }, [])

  const getActors = (actors) => {
    return actors.map((item) => item.name).join()
  }

  return (
    <Fragment>
      <div className="main">
        <div className="header-film">
          <span>深圳</span>
          <li>电影</li>
        </div>
        <div className="tabs-bar">
          <li>正在热映</li>
          <li>即将上映</li>
        </div>
      </div >
      <ul className="list" ref={listRef}>
        {
          films.map((item, index) => {
            return (
              <li className="item" key={index} >
                <img src={item.poster} alt="" />
                <div className="info">
                  <div className="main_title">
                    <h2>{item.name}</h2>
                    <span>观众评分{item.grade}</span>
                    <span>主演：{getActors(item.actors)}</span>
                    <span></span>
                  </div>
                  <div className="nowPlayingFilm-buy">购票</div>
                </div>
              </li>
            )
          })}

      </ul >
    </Fragment >
  )
}

export default Film